<template>
  <el-tooltip :content="text"
              :disabled="disabled"
              :open-delay="openDelay"
              :placement="placement"
              :arrowOffset="offset"
              popper-class="ellipsis-vessel-height__popper">
    <span class="tooltip-inner"
          ref="tooltip-inner"
          :style="{color:color}"
          @mouseenter="visibilityChange">
      {{text}}
    </span>
  </el-tooltip>
</template>

<script>

export default {
  name: 'EllipsisVesselHeight',
  props: {
    text: {
      type: String
    },
    color: {
      type: String
    },
    offset: {
      type: Number,
      default: 0
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    openDelay: {
      type: Number,
      default: 1000
    }

  },
  data () {
    return {
      disabled: true
    }
  },

  methods: {
    visibilityChange (event) {
      const innerElement = event.target
      const parentElement = event.target.parentElement

      const innerHeight = innerElement.offsetHeight
      const parentHeight = parentElement.clientHeight
      if (parentHeight < innerHeight) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    }
  }
}
</script>
<style lang="scss">
.ellipsis-vessel-height__popper {
  width: 280px;
}
</style>
